<template>
    <div>
        <!-- 主表 -->
        <standard-Template v-bind="tableColumns" ref="table" @selectionChange="selectionChange"></standard-Template>
        <!-- 子表 -->
        <div v-for="item in childrensColumns" :key="item.id" style="margin-bottom:20px;text-align:left;">
            <span>{{item.childrenLabel}}</span>
            <!-- <standard-Template v-bind="item" ref="childTable"></standard-Template> -->
            <el-table
            border
            :stripe='item.stripe'
            :key="item.id"
            :data="item.tableData" 
            :tooltip-effect="item.tooltip" 
            style="width: 100%">
                <template v-for="(citem,cindex) in item.columns">
                    <el-table-column v-if="citem.type=='selection'" :fixed="citem.fixed" :align="citem.align" :key="cindex" :width="citem.width" :type="citem.type"></el-table-column>
                    <el-table-column v-else :fixed="citem.fixed"   :align="citem.align" :key="cindex" :prop="citem.prop" :label="citem.label" 
                    :width="citem.width" :sortable="citem.isSortable">
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>
<script>
import StandardTemplate from "./baseComponents/StandardTable"
import {queryApi} from '@/api/api'
export default {
    name:"moreTable",
    props:{
        tableColumns:{
            type: Object
        },
        childrensColumns:{
            type: Array,
            default:[]
        }
    },
    components:{
        StandardTemplate
    },
    data(){
        return{
        }
    },
    watch:{
        childrensColumns(val,oldVal){
            this.childrensColumns = val;
        },
        tableColumns(val,oldVal){
            this.tableColumns = val;
        }   
    },
    methods:{
        getRowKey(row){
            return row.id
        },
        // 选中触发的事件
        selectionChange(selection){
            if(selection.length==0||selection.length>1){
                for(var i=0;i<this.childrensColumns.length;i++){
                    this.childrensColumns[i].tableData = [];
                }
                return;
            }
            if(this.tableColumns.childApiName ==""){//直接获取主表数据子项
                for(var i=0;i<this.childrensColumns.length;i++){
                    this.childrensColumns[i].tableData = [...selection[0][this.childrensColumns[i].childrenTableDataArrName]];
                }
                console.log(this.childrensColumns[0].tableData);
            }else{//根据主表id请求子表数据
                let param = {}
                let that = this;
                const id = that.tableColumns["id"];
                param = { id:selection[selection.length-1][id] };
                let apiName = that.tableColumns.childApiName;
                // that.query(param);
                apiName(param).then(res => {
                    that.loading = false;
                    res = res && res.rspBody ? res.rspBody : {}
                    res.resultData = res.resultData ? res.resultData : [];
                    for(var i=0;i<that.childrensColumns.length;i++){
                        if(res.resultData instanceof Object){
                            that.childrensColumns[i].tableData = [...res.rspBody[that.childrensColumns[i].childrenTableDataArrName]];
                        }else if(res.resultData instanceof Array){
                            that.childrensColumns[i].tableData = [...res.resultData];
                        }
                    }
                    that.$emit('childTableRequest', res);
                });
            }
        },
    },
    mounted(){
        this.$refs.table.query({})
    }
}

</script>